/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from 'react'
import { Card,Form, Input, Cascader, Select, Row, Col, Checkbox, Button } from 'antd';
export default class register extends Component {
    render() {
        const { Option } = Select;
        const residences = [
            {
              value: '广东',
              label: '广东',
              children: [
                {
                  value: 'shenzhen',
                  label: '深圳',
                  children: [
                    {
                      value: 'nanshan',
                      label: '南山',
                    },
                  ],
                },
              ],
            },
            {
              value: 'jiangsu',
              label: '江苏',
              children: [
                {
                  value: 'nanjing',
                  label: '南京',
                  children: [
                    {
                      value: 'zhonghuamen',
                      label: '中华门',
                    },
                  ],
                },
              ],
            },
        ];
        const formItemLayout = {
            labelCol: {
              xs: {
                span: 24,
              },
              sm: {
                span: 3,
              },
            },
            wrapperCol: {
              xs: {
                span: 24,
              },
              sm: {
                span: 18,
              },
            },
        };
        
        // const [form] = Form.useForm();

        const onFinish = (values) => {
          console.log('Received values of form: ', values);
        };
      
        const prefixSelector = (
            <Form.Item name="prefix" noStyle>
              <Select
                style={{
                  width: 70,
                }}
              >
                <Option value="86">+86</Option>
                <Option value="87">+87</Option>
              </Select>
            </Form.Item>
        );
        
        const tailFormItemLayout = {
            wrapperCol: {
              xs: {
                span: 24,
                offset: 0,
              },
              sm: {
                span: 16,
                offset: 8,
              },
            },
        };
        return (
            <div className="card-content" layout="vertical">
                <Card title="注册表单">
                    <Form
                        {...formItemLayout}
                        // form={form}
                        name="register"
                        onFinish={onFinish}
                        initialValues={{
                            residence: ['广东', 'shenzhen', 'nanshan'],
                            prefix: '86',
                        }}
                        scrollToFirstError
                        >

                        <Form.Item
                                name="email"
                                label="电子邮箱"
                                rules={[
                                {
                                    type: 'email',
                                    message: '输入的电子邮件无效！',
                                },
                                {
                                    required: true,
                                    message: '请输入您的电子邮件！',
                                },
                                ]}
                            >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            name="password"
                            label="密码"
                            rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                            ]}
                            hasFeedback
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            name="confirm"
                            label="确认密码"
                            dependencies={['password']}
                            hasFeedback
                            rules={[
                            {
                                required: true,
                                message: 'Please confirm your password!',
                            },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                if (!value || getFieldValue('password') === value) {
                                    return Promise.resolve();
                                }

                                return Promise.reject(new Error('The two passwords that you entered do not match!'));
                                },
                            }),
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            name="nickname"
                            label="昵称"
                            tooltip="您希望别人怎么称呼您?"
                            rules={[
                            {
                                required: true,
                                message: 'Please input your nickname!',
                                whitespace: true,
                            },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            name="residence"
                            label="常住地"
                            rules={[
                            {
                                type: 'array',
                                required: true,
                                message: 'Please select your habitual residence!',
                            },
                            ]}
                        >
                            <Cascader options={residences} />
                        </Form.Item>

                        <Form.Item
                            name="phone"
                            label="手机号码"
                            rules={[
                            {
                                required: true,
                                message: '请输入您的电话号码!',
                            },
                            ]}
                        >
                            <Input
                            addonBefore={prefixSelector}
                            style={{
                                width: '100%',
                            }}
                            />
                        </Form.Item>

                        <Form.Item
                            name="gender"
                            label="性别"
                            rules={[
                            {
                                required: true,
                                message: '请选择性别!',
                            },
                            ]}
                        >
                            <Select placeholder="请选择您的性别">
                                <Option value="male">男性</Option>
                                <Option value="female">女性</Option>
                            </Select>
                        </Form.Item>

                        <Form.Item label="验证码" extra="我们必须确保您不是机器人.">
                            <Row gutter={8}>
                            <Col span={12}>
                                <Form.Item
                                name="captcha"
                                noStyle
                                rules={[
                                    {
                                    required: true,
                                    message: '请输入您得到的验证码!',
                                    },
                                ]}
                                >
                                <Input />
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Button>获取验证码</Button>
                            </Col>
                            </Row>
                        </Form.Item>

                        <Form.Item
                            name="agreement"
                            valuePropName="checked"
                            rules={[
                            {
                                validator: (_, value) =>
                                value ? Promise.resolve() : Promise.reject(new Error('接受协议')),
                            },
                            ]}
                            {...tailFormItemLayout}
                        >
                            <Checkbox>
                            我已经看过 <a href="">协议书</a>
                            </Checkbox>
                        </Form.Item>
                        <Form.Item {...tailFormItemLayout}>
                            <Button type="primary" htmlType="submit">
                            注册
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        )
    }
}
